<!doctype html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no viewport-fit=cover" />
		<link rel="stylesheet" href="../Common/css/lib/materialize.min.css">
		<link rel="stylesheet" href="../Common/css/lib/minirefresh.css" />
		<link rel="stylesheet" href="../Common/css/lib/minirefresh.theme.applet.css" />
		<link rel="stylesheet" href="../Common/css/lib/swiper.css">
		<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
		<link rel="stylesheet" href="../Common/css/ufun.css" />
		<link rel="stylesheet" href="../Common/css/table-list.css" />
		<script src="../Common/js/lib/minirefresh.js"></script>
		<script src="../Common/js/lib/minirefresh.theme.applet.js"></script>
		<script src="../Common/js/lib/jquery-3.4.1.min.js"></script>
		<script src="../Common/js/lib/materialize.min.js"></script>
		<script src="../Common/js/lib/swiper.js"> </script>
		<script src="../Common/js/table-list.js"></script>
		<script src="../Common/js/jump.js"></script>
		<script src="../Common/js/jump-to-detail.js"></script>
		<script src="../Common/js/tools.js"></script>
		<style>
			#QuesList {
				--card-height: 35;
			}

			.ques-rows {
				width: 100%;
				min-height: calc(var(--card-height) * 1vw);
			}

			.ques-rows>* {
				display: block;
				width: 55vw;
			}

			.ques-preview {
				width: 100%;
				height: fit-content;
				color: var(--color-gray-medium);
			}

			.ques-title {
				display: block;
				width: 100%;
				font-size: 4.5vw;
				font-weight: bold;
			}

			.ques-queser {
				--line-height: calc(10vw + 2px);
				height: var(--line-height);
			}

			.ques-queser .ques-head-img {
				float: left;
				height: 8vw;
				width: 8vw;
				margin: 1vw 2vw 1vw 0;
				border-radius: 100%;
				border: 1px solid var(--color-gray-medium);
			}

			.ques-queser .ques-nick {
				font-size: 3.5vw;
				height: var(--line-height);
				line-height: var(--line-height);
			}

			.ques-footer {
				display: flex;
				align-items: center;
				width: 100%;
			}

			.ques-footer>* {
				padding-right: 1vw;
				width: max-content;
				font-size: 3.5vw;
				color: var(--color-gray-medium);
			}

			.ques-price {
				text-align: center;
				padding: 0.5vw 1vw;
				min-width: 15vw;
				height: 7vw !important;
				color: var(--color-gray-dark);
				background: var(--color-yellow);
				border-radius: 2vw;
				align-items: center;
				justify-content: center;
				display: flex;
			}

			#ques-reward-name {
				margin-right: 2vw;
			}

			/* 有无悬赏 */
			.ques-price.free {
				color: var(--color-white);
				background: var(--color-gray-dark);
			}
		</style>
	</head>

	<body>
		<!-- 卡片模板 -->
		<div class="temp" id="QuesTemplate">
			<li class="list-card" quesId="0">
				<div class="ques-rows">
					<div class='ques-title'></div>
					<div class="ques-queser">
						<img class='ques-head-img'>
						<div class="ques-nick"></div>
					</div>
					<div class="ques-preview"></div>
					<div class="ques-footer">
						<div class="ques-data">233</div>
						<div>浏览 · </div>
						<div class="ques-data">332</div>
						<div>推荐</div>
						<div style="flex: auto; text-align: right;" id="ques-reward-name">悬赏</div>
						<div class='ques-price'></div>
					</div>
				</div>
			</li>
		</div>
		<header>

			<div style="width: 100%;">
				<div id="NavBar">
					<img class="circle" src="../Mine/personal-center/img/headimg.png">
					<div id="Search">
						<input id="SearchInput" placeholder="我是搜索框">
						<i class="material-icons">search</i>
					</div>
					<div id="CampusCorner" onclick="JumpToSelectEdu(eduId);">
						<i class="material-icons">school</i>
						<a id="CampusName" id="truncate">山西大学</a>
					</div>
				</div>
				<ul class="tabs row">
					<li class="tab col s3">
						<a onclick="changeListType('hot');">
							<h5>热门</h5>
						</a>
					</li>
					<li class="tab col s3">
						<a onclick="changeListType('dept');">
							<h5>院系</h5>
						</a>
					</li>
					<li class="tab col s3">
						<a onclick="changeListType('campus');">
							<h5>校圈</h5>
						</a>
					</li>
				</ul>
			</div>
		</header>
		<div class="content fixed">
			<!-- 消息列表 -->
			<div id="Minirefresh" class="minirefresh-wrap">
				<div class="minirefresh-scroll">
					<!-- 轮播 -->
					<div class="swiper-container">
						<div class="swiper-wrapper">
							<!-- <div class="swiper-slide"><img src="../Common/img/banner1.jpg"></div>
							<div class="swiper-slide"><img src="../Common/img/banner2.jpg"></div>
							<div class="swiper-slide"><img src="../Common/img/banner3.jpg"></div>
							<div class="swiper-slide"><img src="../Common/img/banner4.jpg"></div> -->
						</div>
						<div class="swiper-pagination"></div>
					</div>
					<!-- 重要的问题列表在这里!!! -->
					<ul class="list" id="QuesList"></ul>
				</div>
			</div>
		</div>
		<script>
			var userHash;
			var current;
			var lastId = 0;
			var isEnd = false;
			var quesLists = ID("QuesList");
			var listType;
			var mySwiper;
			var miniRefresh;
			var eduId;
			// 假数据
			// var TEMP_DATA = null;
			/* 有大段的逻辑封装在table-list.js里 */
			mySwiper = new Swiper('.swiper-container', {
				loop: true, // 循环模式选项
				autoplay: true,
				pagination: {
					el: '.swiper-pagination',
				},
			});

			document.addEventListener('plusready', () => {
				DoWait();
				GetStatusTop();
				userHash = plus.storage.getItem('userHash');
				current = plus.webview.currentWebview();
				// 轮播图初始化
				let data = {
					userHash: userHash,
				}
				CallAJAX('getCarousel', data, function(res) {
					let list = res.carouselList;
					let html = ''
					console.log(JSON.stringify(list))
					for (let i in list) {
						html += '<div class="swiper-slide"><img src=" '+ SERVER_LOC + list[i].imgLoc + '" data-type=' + list[i].entityType +
							' data-id=' + list[i].entityId + '></div>'
					}
					console.log(html)
					$('.swiper-wrapper').html(html);
				}, function(e) {
					console.log(JSON.stringify(e));
				});
				RefreshUserInfo(function(phoneno) {
					drawPage();
				});
				miniRefresh = MakeMiniRefreshWithSwiper('.swiper-container', '#QuesList');
				refreshPage("hot");
				DoShow(current, 'none', 0);
			});

			// 轮播跳转详情
			$(document).on('click', '.swiper-slide img', function() {
				console.log($(this).data('id'))
				JumpDetail($(this).data('type'), $(this).data('id'))
			})
			$('.swiper-slide').click(function() {
				// let data = {
				// 	userHash: userHash,
				// 	entityType: $(this).data('entityType'),
				// 	entityId: $(this).data('entityId')
				// }
				
				// CallAJAX('JumpToDetail', data, function(res) {
				// 	let type = res.type;
				// 	let id = 1; // 轮播图id
				// 	JumpDetail(type, id)
				// })
			});

			function showList(id) {
				var data = {
					"userHash": userHash,
					"lastId": id,
					"listType": listType,
				};
				if (listType != "hot")
					data['eduId'] = eduId;
				InRefresh = true;
				id = id ? id : 0;
				DoWait();
				// AJAX: listQues
				CallAJAX('listQues',
					data,
					function(data) { // success
						DontWait();
						if (data["res"] == "1") {
							isEnd = true;
							miniRefresh.endDownLoading(true);
							miniRefresh.endUpLoading(true);
						} else {
							isEnd = false;
							miniRefresh.endDownLoading();
							miniRefresh.endUpLoading();
						}
						if (id == 0) {
							quesLists.innerHTML = "";
							lastId = 0;
						}
						if (data["res"] == "ok") {
							let quesCnt = quesLists.children.length;
							for (let i in data["quesList"]) {
								data2 = JSON.stringify(data["quesList"][i]);
								data2 = JSON.parse(data2);
								addQuesCard(data2, quesCnt);
								//addQuesCard(data2["quesList"][i], quesCnt);
							}
							ID('QuesList').style.opacity = 1;
						}
					},
					function() { // error
						DontWait();
						InRefresh = false;
						isEnd = true;
						quesLists.style.display = "none";
						// BadPage.style.display = "block";
						console.log("question load failed.");
					});
			}

			function addQuesCard(ques) {
				if (lastId != 0 && ques["quesId"] >= lastId)
					return;
				let newQues = document.getElementById("QuesTemplate").lastElementChild.cloneNode(true);
				newQues.setAttribute("quesid", ques["quesId"].toString());
				newQues.setAttribute("userid", ques["quesQueserId"].toString());
				newQues.onclick = function() {
					JumpToQues(parseInt(newQues.getAttribute("quesid")));
				}
				// newQues.getElementsByClassName("ques-cover-img")[0].src = '';
				newQues.getElementsByClassName("ques-head-img")[0].src = SERVER_LOC + ques["quesQueserHeadImgLoc"];
				newQues.getElementsByClassName("ques-nick")[0].innerText = ques["quesQueserNick"];
				newQues.getElementsByClassName("ques-nick")[0].innerText = ques["quesQueserNick"];
				newQues.getElementsByClassName("ques-title")[0].innerText = ques["quesTitle"];
				newQues.getElementsByClassName("ques-preview")[0].innerText = ques["quesPreview"];
				newQues.getElementsByClassName("ques-data")[0].innerText = ques["quesLookedCnt"];
				newQues.getElementsByClassName("ques-data")[1].innerText = ques["quesLikedCnt"];
				quesLists.appendChild(newQues);
				lastId = ques["quesId"];
				quesLists.style.display = "block";
				if (ques["quesReward"] == 0) {
					ques["quesReward"] = '无悬赏';
					newQues.getElementsByClassName("ques-price")[0].classList.add('free');
					newQues.getElementsByClassName("ques-price")[0].innerText = ques["quesReward"];
				} else {
					ques["quesReward"] += '元';
					newQues.getElementsByClassName("ques-price")[0].innerText = ques["quesReward"];
				}
			}
		</script>
	</body>
</html>

